<script lang="ts" setup>
  import {
    fetchFieldCfgList,
    fetchFieldCfgDetail,
    deleteFieldCfg,
  } from '@/api/dictConfig'
  import { Search, Edit, Plus, Delete } from '@element-plus/icons-vue'
  import { fetchDictSelectList } from '@/api/dictionaryManagement'
  import UserSelect from '@/components/biz/UserSelect'
  import EditForm from './edit'

  const queryForm = reactive({
    typeCode: 'assetinfo',
    userId: '',
    keywords: '',
    develop: 1,
  })
  const $baseConfirm = inject('$baseConfirm')
  const $baseMessage = inject('$baseMessage')
  const typeCodeList = ref([])
  const editFormRef = ref(null)
  const table = reactive({
    query: {},
    data: [],
    pageNum: 1,
    pageSize: 10,
  })

  const getTypeCodeList = async () => {
    try {
      const { data } = await fetchDictSelectList({ typeCode: 'moduleCode' })
      typeCodeList.value = data || []
    } catch (e) {
      console.error(e)
    }
  }

  const getList = async () => {
    try {
      const queryParams = JSON.parse(JSON.stringify(queryForm))
      if (!queryParams.userId) {
        queryParams.userId = 0
      }
      const { data } = await fetchFieldCfgList(queryParams)
      table.data = data || []
    } catch (e) {
      console.error(e)
    }
  }

  const handleEdit = async (row) => {
    if (row.id) {
      try {
        const { data } = await fetchFieldCfgDetail(row.id)
        editFormRef.value.showEdit(data)
      } catch (e) {
        console.log(e)
      }
    } else {
      editFormRef.value.showEdit()
    }
  }

  const handleDelete = async (row) => {
    if (row.id) {
      $baseConfirm('你确定要删除当前项吗', null, async () => {
        try {
          const { msg } = await deleteFieldCfg({
            ids: [row.id],
          })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          getList()
        } catch (e) {
          console.error(e)
        }
      })
    }
  }

  onMounted(() => {
    getTypeCodeList()
    getList()
  })
</script>

<template>
  <div class="page-container">
    <div class="query-container">
      <el-form inline :model="queryForm" @submit.prevent>
        <el-form-item label="业务模块">
          <el-select v-model="queryForm.typeCode" clearable>
            <el-option
              v-for="item in typeCodeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户">
          <user-select v-model="queryForm.userId" immediate-load clearable />
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar">
      <div class="operate-container">
        <el-input
          v-model.trim="queryForm.keywords"
          placeholder="请输入关键字搜索"
        />
        <el-button :icon="Search" type="primary" @click="getList">
          查询
        </el-button>
        <el-button
          :icon="Plus"
          type="primary"
          class="add"
          @click="handleEdit"
        />
      </div>
    </div>
    <el-table :data="table.data" border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column
        prop="fieldProperty"
        label="字段属性名"
        width="160"
        align="center"
      />
      <el-table-column
        prop="displayName"
        label="字段显示名称"
        width="140"
        align="center"
      />
      <el-table-column
        prop="formTypeName"
        label="组件类型"
        width="140"
        align="center"
      />
      <el-table-column
        prop="formCode"
        label="下拉数据源字典编码"
        width="140"
        align="center"
      />
      <el-table-column
        prop="searchConditionName"
        label="查询条件"
        width="140"
        align="center"
      />
      <el-table-column
        prop="formValidation"
        label="校验规则"
        width="140"
        align="center"
      />
      <el-table-column
        prop="width"
        label="表格项宽度"
        width="120"
        align="center"
      />
      <el-table-column
        prop="moduleCode"
        label="所属模块编码"
        width="140"
        align="center"
      />
      <el-table-column
        prop="typeCode"
        label="所属功能编码"
        width="140"
        align="center"
      />
      <el-table-column
        prop="fieldTypeName"
        label="字段类型"
        width="140"
        align="center"
      />
      <el-table-column
        prop="onSearchCol"
        label="是否在查询中展示"
        width="160"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.onSearchCol === 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="onDataCol"
        label="是否在表格中展示"
        width="160"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.onDataCol === 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="onFormCol"
        label="是否在表单中展示"
        width="160"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.onFormCol === 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="associateModuleCode"
        label="关联模块编码"
        width="140"
        align="center"
      />
      <el-table-column
        prop="associateTypeCode"
        label="关联功能编码"
        width="140"
        align="center"
      />
      <el-table-column
        prop="defaultField"
        label="是否默认"
        width="120"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.onSearchCol === 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="100" align="center" />
      <el-table-column label="操作" width="160" align="center" fixed="right">
        <template #default="scope">
          <el-tooltip effect="dark" content="编辑" placement="top">
            <el-button
              type="warning"
              :icon="Edit"
              @click="handleEdit(scope.row)"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top">
            <el-button
              type="danger"
              :icon="Delete"
              @click="handleDelete(scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <edit-form ref="editFormRef" @fetch-data="getList" />
  </div>
</template>

<style scoped>
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  .toolbar .operate-container {
    display: flex;
    position: relative;
  }
  :deep() .toolbar .operate-container .el-input {
    margin-right: 8px;
  }
  :deep() .toolbar .operate-container .el-button {
    margin-left: -2px;
    position: relative;
  }
  :deep() .toolbar .operate-container .el-button.add::before,
  :deep() .toolbar .operate-container .el-button.more::before {
    background-color: #cccccc;
    display: block;
    width: 1px;
    content: '';
    position: absolute;
    left: 0;
    height: 40%;
    opacity: 0.8;
  }
</style>
